<template>
	<view class="page">
		<u-swiper :list="banner" indicator indicatorMode="line" previousMargin="30" nextMargin="30" circular :autoplay="false" radius="5"
			bgColor="#ffffff"></u-swiper>
		<view class="service">
			<view class="server-item" v-if="trainData.length">
				<u-cell-group :border="false">
					<u-cell @click="navigatorCheck('/pagesA/pages/list/realx')" :border="false">
						<text class="title-text" slot="title">减压放松</text>
						<view slot="value" style="display: flex;color: #1D6EFA;">
							<text>查看更多</text>
							<u-icon name="arrow-right" size="18" color="#1D6EFA"></u-icon>
						</view>
					</u-cell>
				</u-cell-group>
				<view class="train-content">
					<view v-for="(item,index) in trainData" :key="index" class="train" @click="toTrain(item)">
						<view class="train-pic">
							<img :src="item.icon_url" alt="">
						</view>
						<view class="train-name">{{item.title}}</view>
					</view>
				</view>
			</view>

			<view class="server-item" v-if="noiseData.length">
				<u-cell-group :border="false">
					<u-cell @click="navigatorCheck('/pagesA/pages/list/nosic')" :border="false">
						<text class="title-text" slot="title">白噪音</text>
						<view slot="value" style="display: flex;color: #1D6EFA;">
							<text>查看更多</text>
							<u-icon name="arrow-right" size="18" color="#1D6EFA"></u-icon>
						</view>
					</u-cell>
				</u-cell-group>
				<view class="train-content">
					<view v-for="(item,index) in noiseData" :key="index" class="train" @tap="toTrain(item)">
						<view class="train-pic">
							<img :src="item.icon_url" alt="">
						</view>
						<view class="train-name">{{item.title}}</view>
					</view>
				</view>
			</view>

			<view class="server-item">
				<u-cell-group :border="false">
					<u-cell @click="testList" :border="false" >
						<text class="title-text" slot="title">心理测评</text>
						<view slot="value" style="display: flex;color: #1D6EFA;">
							<text>查看更多</text>
							<u-icon name="arrow-right" size="18" color="#1D6EFA"></u-icon>
						</view>
					</u-cell>
				</u-cell-group>
				<view class="train-content">
					<view class="train" @click="navigatorCheck('/pagesA/pages/testMain/testPre?id=92')">
						<view class="train-pic">
							<img src="https://baxztech.com/bian_admin_api/public/bianmp/test/testB.png" alt="">
							<view class="test-tag">测评</view>
						</view>
						<view class="train-name">大五人格</view>
					</view>
					<view class="train" @click="navigatorCheck('/pagesA/pages/testMain/testPre?id=119')">
						<view class="train-pic">
							<img src="https://baxztech.com/bian_admin_api/public/bianmp/test/testA.png" alt="">
							<view class="test-tag">测评</view>
						</view>
						<view class="train-name">PHQ-9</view>
					</view>
					<view class="train" @click="navigatorCheck('/pagesA/pages/testMain/testPre?id=117')">
						<view class="train-pic">
							<img src="https://baxztech.com/bian_admin_api/public/bianmp/test/testD.png" alt="">
							<view class="test-tag">测评</view>
						</view>
						<view class="train-name">状态焦虑量表</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		computed: {
			...mapState(['member']),
		},
		data() {
			return {
				imei: "",
				banner: [
					'https://baxztech.com/bian_admin_api/public/bianmp/test/Group1.png',
					'https://baxztech.com/bian_admin_api/public/bianmp/test/Group2.png',
					'https://baxztech.com/bian_admin_api/public/bianmp/test/Group3.png',
				],
				trainData: [],
				noiseData: [],
				active: 0,
				utabs: [{
						name: '冥想放松'
					},
					{
						name: '舒服放松'
					},
					{
						name: '睡前故事'
					},
					{
						name: '自由练习'
					}
				],
			}
		},
		onLoad() {
			this.imei = this.member.imei || ''
			uni.$u.http.post('/client/serviceResource', {
				data: "{\"recommend_type\":1,\"recommend_size\":3}",
				method: "heartide.bixin.audio.recommend"
			}).then(res => {
				if (res.code == "0") {
					let data = JSON.parse(res.data)
					this.imei = "1"
					this.trainData = data;
					this.$store.state.trainList = data;
				}
			})
			// uni.$u.http.post('/client/serviceResource',{
			// 	"data":"{\"recommend_type\":2,\"recommend_size\":3}",
			// 	"method":"heartide.bixin.audio.recommend"
			// }).then(res =>{
			// 	if(res.code == "0"){
			// 		let data = JSON.parse(res.data)
			// 		this.imei = "1"
			// 		this.noiseData = data;
			// 	}
			// })


			uni.$u.http.post('/client/serviceResource', {
				"data": "{\"type_id\":8,\"page_size\":6,\"page\":1}",
				"method": "heartide.bixin.audio.list"
			}, {
				header: {
					appId: 'bixin_openApi_v1',
					appKey: 'KlaWySuV_j1JcLa-X3UI'
				}
			}).then(res => {
				if (res.code == '0') {
					let data = JSON.parse(res.data).data_list;
					this.imei = "1"
					this.$store.state.noiseList = data;

					this.noiseData = data.slice(0, 3);

				}
			})
		},
		methods: {
			navigatorCheck(url) {
				uni.navigateTo({
					url: url
				})
				// if (this.member.phone) {
				// 	uni.navigateTo({
				// 		url: url
				// 	})
				// } else {
				// 	uni.navigateTo({
				// 		url: '/pagesA/pages/login/login'
				// 	})
				// }
			},
			toTrain(d) {
				// if (this.member.phone) {
					uni.navigateTo({
						url: '/pagesA/pages/audio/audio',
						success: (res) => {
							res.eventChannel.emit('datas', d)
						}
					})
				// } else {
				// 	uni.navigateTo({
				// 		url: '/pagesA/pages/login/login'
				// 	})
				// }
			},
			testList() {
				uni.navigateTo({
					url: '/pagesA/pages/testMain/testList',
					success: (res) => {
						res.eventChannel.emit('datas', {})
					}
				})
			},
		}
	}
</script>

<style lang='less' scoped>
	.service {
		padding: 16px;
	}

	.server-item {
		border-radius: 10px;
		margin-bottom: 10px;
	}

	.item-title {
		font-size: 28rpx;
		color: #333333;
		line-height: 40.8rpx;
	}

	.item-dec {
		color: #aaaaaa;
		font-size: 19.6rpx;
	}

	.train-content {
		padding: 12px;
		display: flex;
		justify-content: space-between;
	}

	.train {
		width: 32%;
	}

	.train-pic {
		position: relative;
		border-radius: 10px;
	}

	.train-pic img {
		display: block;
		width: 100%;
		height: 100px;
		border-radius: 10px;
	}

	.train-tag {
		position: absolute;
		right: 0px;
		top: 0px;
		height: 20px;
		line-height: 20px;
		text-align: center;
		font-size: 12px;
		color: #fff;
		padding: 0px 7px;
		border-radius: 0px 10px 0px 10px;
	}

	.train-name {
		padding-top: 8px;
		height: 18px;
		line-height: 18px;
		text-align: center;
		font-size: 14px;
		color: #333;
		overflow: hidden;
	}

	.title-text {
		height: 80rpx;
		line-height: 80rpx;
		font-size: 34rpx;
		font-weight: 700;
		color: #333333;
	}

	.test-tag {
		position: absolute;
		right: 0px;
		top: 0px;
		height: 20px;
		line-height: 20px;
		text-align: center;
		font-size: 12px;
		color: #fff;
		padding: 0px 7px;
		border-radius: 0px 10px 0px 10px;
		background-color: rgba(0, 0, 0, 0.5);
	}
</style>